<script setup>
// import Header from "@/components/header/Header.vue";
import {useRouter} from 'vue-router';
import api from '@/api/index.js';
import {userStore} from '@/stores/user.js';
import {maskPhoneNumber} from '@/utils/index.js';
import {getToken} from '@/utils/user.js';
import {getIsImplantApp} from '@/utils/implant.js';
import {showToast} from "vant";
import {scanQRCode} from "@/utils/wx-utils.ts";
// import CardOrder from './components/card-order/index.vue'
// import CardCoupon from './components/card-coupon/index.vue'
// import CardIntegral from './components/card-integral/index.vue'
// import CardMember from './components/card-member/index.vue'
const user = userStore();
const router = useRouter();

const goRouterClick = (path, title) => {
  if(!getToken()){
    showToast('请先登录');
    router.push('/login');
    return
  }
  router.push({path, query: {title}});
};
const handleAddressClick = () => {
  if (!getToken()) {
    showToast('请先登录');
    router.push('/login');
    return
  }
  router.push({path: '/my-address'});
};
const handelgopeople = () => {
  if (!getToken()) {
    showToast('请先登录');
    router.push('/login');
    return
  }
  router.push({path: '/pedestrianmanagement'});
};
const handelgopeople1 = () => {
  router.push({path: '/settinginterface'});
};
// const logoutClick = () => {
//   router.push({ path: '/login' })
// }

const _getUserInfo = () => {
  console.log('_getUserInfo');
  if (getToken()) {
    api.getUserinfo().then((res) => {
      sessionStorage.setItem('userInfo', JSON.stringify(res.data));
      user.setUserInfo(res.data);
    });
  }
};
// const  on

_getUserInfo();

const goLoginClick = () => {
  router.push('/login');
};
const handleToIntegral = () => {
  if (!getToken()) {
    showToast('请先登录');
    router.push('/login');
    return
  }
  const appid= import.meta.env.VITE_R29_PAY_APPID
  window.location.href =
      `https://pay.028wlkj.com/point/index?uid=${user.userInfo.memberId}&appId=${appid}`;
};
const handleToCoupon = () => {
  if (!getToken()) {
    showToast('请先登录');
    router.push('/login');
    return
  }
  router.push('/coupon');
};
console.log('mine 1213213')
</script>

<template>
  <!--  <Header title="我的" />-->
  <div class="content">
    <div class="mine">
      <div class="avatar_box">
        <img v-if="user.userInfo?.avatar" :src="user.userInfo?.avatar" alt=""/>
        <img v-else src="../../assets/images/index/avatar.png" alt=""/>
      </div>
      <div @click="goLoginClick" v-if="!getToken()" class="name">未登录</div>
      <div v-else-if="user.userInfo?.telephone" class="name">
        <!-- <div class="nickname"> {{ user.userInfo?.nickName }} </div> -->
        <div class="telephone">
          {{ maskPhoneNumber(user.userInfo?.telephone) }}
        </div>
      </div>
    </div>
    <!-- <CardOrder></CardOrder>
    <div class="wrapContent">
            <CardMember></CardMember>
            <CardIntegral></CardIntegral>
    </div>
    <CardCoupon ></CardCoupon> -->

    <div class="card">
      <div
          class="list"
          @click="
          () => {
             if(!getToken()){
            showToast('请先登录');
            router.push('/login');
            return
  }
            router.push({ path: '/mall-order',query:{
              isConsumption:1
            } });
          }
        "
      >
        <div class="box">
          <img src="@/assets/images/icons/panda.png" alt=""/>
          <!-- <div class="name">熊猫金卡订单</div> -->
          <div class="name">社区商店订单</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
      <div class="list" @click="goRouterClick('/activity-order', '1,2,3')">
        <div class="box">
          <img src="@/assets/images/icons/hs.png" alt=""/>
          <!-- <div class="name">嗨耍卡订单</div> -->
          <div class="name">共享预约订单</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
<!--      <div class="list" @click="goRouterClick('/convenience-order', '')">-->
<!--        <div class="box">-->
<!--          <img src="@/assets/images/icons/TeamOutlined.png" alt=""/>-->
<!--          &lt;!&ndash; <div class="name">景点门票订单</div> &ndash;&gt;-->
<!--          <div class="name">便民服务订单</div>-->
<!--        </div>-->
<!--        <van-icon name="arrow" color="#999999"/>-->
<!--      </div>-->

      <div class="list"  @click="
          () => {
             if(!getToken()){
            showToast('请先登录');
            router.push('/login');
            return
  }
            router.push({ path: '/mall-order',query:{
              isConsumption:0
            } });
          }">
        <div class="box">
          <img src="@/assets/images/icons/hotel-icon.png" alt=""/>
          <!-- <div class="name">酒店订单</div> -->
          <div class="name">自助消费订单</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
      <div class="list" @click="goRouterClick('/activity-order', '0')">
        <div class="box">
          <img src="@/assets/images/icons/hotpot-icon.png" alt=""/>

          <!-- <div class="name">活动订单</div> -->
          <div class="name">活动预约订单</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
    </div>

    <div class="card">
<!--      <div class="list" @click="handelgopeople">-->
<!--        <div class="box">-->
<!--          <img src="@/assets/images/icons/people.png" alt=""/>-->
<!--          <div class="name">出行人管理</div>-->
<!--        </div>-->
<!--        <van-icon name="arrow" color="#999999"/>-->
<!--      </div>-->
      <div class="list" @click="handleAddressClick">
        <div class="box">
          <img src="@/assets/images/icons/EnvironmentOutlined.png" alt=""/>
          <div class="name">地址管理</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
      <div class="list" @click="handleToIntegral">
        <div class="box">
          <img src="@/assets/images/icons/EnvironmentOutlined.png" alt=""/>
          <div class="name">积分</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
      <div class="list" @click="handleToCoupon">
        <div class="box">
          <img src="@/assets/images/icons/EnvironmentOutlined.png" alt=""/>
          <div class="name">优惠券</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
      <div v-if="!getIsImplantApp()" class="list" @click="handelgopeople1">
        <div class="box">
          <img src="@/assets/images/icons/SettingOutlined.png" alt=""/>
          <div class="name">设置</div>
        </div>
        <van-icon name="arrow" color="#999999"/>
      </div>
<!--      <div v-if="!getIsImplantApp()" class="list" @click="()=>{-->
<!--        scanQRCode()-->
<!--      }">-->
<!--        <div class="box">-->
<!--          <img src="@/assets/images/icons/SettingOutlined.png" alt=""/>-->
<!--          <div class="name">扫码</div>-->
<!--        </div>-->
<!--        <van-icon name="arrow" color="#999999"/>-->
<!--      </div>-->
    </div>
    <div class="bg">
      <img src="@/assets/images/index/mine_bg.png" alt=""/>
      <div class="bg_none"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 0 1.5rem;
  height: 100%;
  background: #f9f8f3;

  .mine {
    display: flex;
    align-items: center;
    margin-top: 3rem;
    z-index: 1;

    .avatar_box {
      height: 4.9rem;
      width: 4.9rem;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .name {
      margin-left: 1rem;
      color: #333333;
      font-size: 16px;
      font-weight: bold;

      .nickname {
        font-size: 12px;
      }

      .telephone {
        margin-top: 5px;
      }
    }
  }

  .card {
    margin: 1.5rem 0;
    background: #fffffc;
    border-radius: 1rem;
    z-index: 1;

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;

      .box {
        display: flex;
        align-items: center;

        img {
          width: 1.6rem;
          height: 1.6rem;
          margin-right: 0.6rem;
        }

        .name {
          font-size: 1.5rem;
          color: #333333;
          font-weight: bold;
        }
      }
    }
  }

  .coupon {
    height: 50px;
    line-height: 50px;
    background: url('../../assets/images/icons/input_coupon_bg.png') no-repeat;
    background-size: 100% 100%;

    .list {
      padding: 0 1.5rem;
    }
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;

    img {
      width: 100vw;
    }

    .bg_none {
      flex: 1;
    }
  }
}

.wrapContent {
  display: flex;
  margin-top: 15px;
}
</style>
